<!-- 装修用户组件：用户订单 -->
<template>
  <view class="ss-order-menu-wrap ss-flex ss-col-center">
	  <view class="menu-head">
	  	<view class="left font-AlibabaPuHuiTiHeavy">
	  		我的订单
	  	</view>
		<view 
		class="right font-PingFangRegular" 
		@tap="sheep.$router.go('/pages/order/list',{ type: 0 })"
		>
			全部
			<image class="user-jiantou" :src="sheep.$url.static('/assets/img/user-jiantou@2x.png')" mode="aspectFill" alt="" ></image>
		</view>
	  </view>
	  <view class="menu-body">
	  	<view
	  	  class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
	  	  v-for="item in orderMap"
	  	  :key="item.title"
	  	  @tap="sheep.$router.go(item.path, { type: item.value })"
	  	>
	  	  <uni-badge
	  	    class="uni-badge-left-margin"
	  	    :text="numData.orderCount[item.count]"
	  	    absolute="rightTop"
	  	    size="big"
	  	  >
	  	    <image class="item-icon" :src="sheep.$url.static(item.icon)" mode="aspectFit" />
	  	  </uni-badge>
	  	  <view class="menu-title ss-m-t-4">{{ item.title }}</view>
	  	</view>
	  </view>
    
  </view>
</template>

<script setup>
  /**
   * 装修组件 - 订单菜单组
   */
  import sheep from '@/sheep';
  import { computed } from 'vue';

  const orderMap = [
    {
      title: '待付款',
      value: '1',
      icon: '/assets/img/user-2.png',
      path: '/pages/order/list',
      type: 'unpaid',
      count: 'unpaidCount',
    },
	{
      title: '待发货',
      value: '2',
      icon: '/assets/img/user-1.png',
      path: '/pages/order/list', //需要修改跳转链接
      type: 'noget',
      count: 'undeliveredCount',
    },
    {
      title: '待收货',
      value: '3',
      icon: '/assets/img/user-3.png',
      path: '/pages/order/list',
      type: 'noget',
      count: 'deliveredCount',
    },
    {
      title: '已完成',
      value: '4',
      icon: '/assets/img/user-4.png',
      path: '/pages/order/list',
      type: 'nocomment',
      count: 'uncommentedCount',
    }
    // {
    //   title: '售后单',
    //   value: '0',
    //   icon: '/static/img/shop/order/change_order.png',
    //   path: '/pages/order/aftersale/list',
    //   type: 'aftersale',
    //   count: 'afterSaleCount',
    // },
    // {
    //   title: '全部订单',
    //   value: '0',
    //   icon: '/static/img/shop/order/all_order.png',
    //   path: '/pages/order/list',
    // },
  ];

  const numData = computed(() => sheep.$store('user').numData);
  //如果角标展示数量大于99，展示99+
  for(let i in sheep.$store('user').numData.orderCount){
	   if(sheep.$store('user').numData.orderCount[i] > 99){
		   sheep.$store('user').numData.orderCount[i] = '99+'
	   }
  }
 
</script>

<style lang="scss" scoped>
  .ss-order-menu-wrap {
	  display: flex;
	  flex-direction: column;
	.menu-head{
		margin: 30rpx 0;
		width: 626rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.left{
			height: 34rpx;
			// font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 32rpx;
			color: #232323;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		} 
		.right{
			display: flex;
			flex-direction: row;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #232323;
			text-align: right;
			font-style: normal;
			text-transform: none;
			.user-jiantou{
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
    .menu-body{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 686rpx;
		.menu-item {
		  width: 140rpx;
		  height: 140rpx;
		  z-index: 10;
		  margin-right: 22rpx;
		  .menu-title {
		    font-size: 24rpx;
		    line-height: 24rpx;
		    color: #333333;
		  }
		  .item-icon {
		    width: 80rpx;
		    height: 80rpx;
		  }
		  .num-icon {
		    position: absolute;
		    right: 18rpx;
		    top: 18rpx;
		    padding: 0 8rpx;
		    height: 36rpx;
		    background: #ff4d4f;
		    border-radius: 36rpx;
		    color: #fefefe;
		    display: flex;
		    align-items: center;
		    .num {
		      font-size: 32rpx;
		      transform: scale(0.8);
		    }
		  }
		}
	}
	
  }
</style>
